<template>
  <div class="main-con goodsInfoInfo">
    <!-- 搜索框 -->
    <div class="search-con">
      <div class="search-item">
        <div class="search-item-title">商品编号</div>
        <div class="search-item-input">
          <el-input size="mini" v-model="formData.productNo" placeholder="请输入商品编号"></el-input>
        </div>
      </div>
      <div class="search-item">
        <div class="search-item-title">商品名称</div>
        <div class="search-item-input">
          <el-input size="mini" v-model="formData.productName" placeholder="请输入商品名称"></el-input>
        </div>
      </div>
      <div class="search-item">
        <div class="search-item-title">大分类</div>
        <div class="search-item-input">
          <el-select size="mini" v-model="formData.bigCategoryId" placeholder="请选择大分类" @change="_queryMidCategoryInfo(formData.bigCategoryId)">
            <el-option v-for="item in bigCategoryOptions" :key="item.id" :label="item.categoryName" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="search-item">
        <div class="search-item-title">中分类</div>
        <div class="search-item-input">
          <el-select size="mini" v-model="formData.midCategoryId" placeholder="请选择中分类" @change="_querySmaCategoryInfo(formData.midCategoryId)">
            <el-option v-for="item in midCategoryOptions" :key="item.id" :label="item.categoryName" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="search-item">
        <div class="search-item-title">小分类</div>
        <div class="search-item-input">
          <el-select size="mini" v-model="formData.smaCategoryId" placeholder="请选择小分类">
            <el-option v-for="item in smaCategoryOptions" :key="item.id" :label="item.categoryName" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="search-item">
        <div class="search-item-title">类型</div>
        <div class="search-item-input">
          <el-select size="mini" v-model="formData.type" placeholder="请选择类型">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="search-item">
        <div class="search-item-title"></div>
        <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button size="mini" type="primary" icon="el-icon-delete" @click="handleClear">清空</el-button>
      </div>
    </div>

    <!-- 按钮组 -->
    <div class="btn-group-con">
      <el-button size="mini" type="primary">同步商品</el-button>
      <el-button size="mini" type="primary">导出</el-button>
      <div class="btn-group-item">
        <el-upload class="upload-demo" action="" :before-upload="handleImport" :show-file-list="false">
          <el-button size="mini" type="primary">导入</el-button>
        </el-upload>
      </div>
      <el-button size="mini" type="primary" @click="downloadTemplate">模板下载</el-button>
      <el-button size="mini" type="primary" @click="downloadTemplate">推送到第三方</el-button>
    </div>

    <!-- 表格数据 -->
    <div class="table-con" v-loading="loading">
      <el-table v-loading="loading" :data="tableData" size="mini" :header-cell-style="{background:'#f8f8f8'}" style="width: 100%">
        <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="productNo" label="商品编号" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="productName" label="商品名称" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="bigCategoryName" label="大分类" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="midCategoryName" label="中分类" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="smaCategoryName" label="小分类" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="specName" label="规格" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="safeRate" label="安全比例" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="操作" width="" align="center">
          <template slot-scope="scope">
            <div class="handleBtn">
              <span @click="handleUpdate(scope.$index, scope.row)">编辑</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 表格分页 -->
    <div class="pagination-con">
      <div class="batch-btn-con">批量设置：
        <el-button size="mini" type="primary">安全比例</el-button>
      </div>
      <m-pagination :currentPage="formData.pageNo" :pageSize="formData.pageSize" :total="total" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
      </m-pagination>
    </div>
  </div>
</template>

<script>
import { queryProductInfo, queryBigCategoryInfo, queryOtherCategoryInfo } from "@/common/service/productManagement/goodsInfo.js";
import mPagination from "@/components/m-pagination/m-pagination";
export default {
    name: "goodsInfoInfo",
    data() {
        return {
            // 搜索条件
            formData: {
                productNo: "", //商品编号
                productName: "", //商品名称
                bigCategoryId: "", //大分类
                midCategoryId: "", //中分类
                smaCategoryId: "", //小分类
                type: "", //类型
                pageNo: 1,
                pageSize: 10
            },
            //下拉框数据
            bigCategoryOptions: [],//大分类
            midCategoryOptions: [],//中分类
            smaCategoryOptions: [],//小分类
            typeOptions: [
                {
                    value: "0",
                    label: "线下商品"
                },
                {
                    value: "1",
                    label: "电商商品"
                }
            ],
            //表格数据
            tableData: [], //表格信息
            total: null, //表格总条数
            loading: false //表格加载动画
        };
    },
    created() {
        //初始化表格数据
        this._queryProductInfo();
        //初始化大分类下拉框数据
        this._queryBigCategoryInfo();
    },
    methods: {
        /*----------------------------查询操作----------------------------*/
        //查询商品信息表格数据
        _queryProductInfo() {
            this.loading = true;
            queryProductInfo(this.formData)
                .then(res => {
                    this.loading = false;
                    this.tableData = res.content;
                    this.total = res.totalElements;
                })
                .catch(err => {
                    this.loading = false;
                    this.$message.error(err.message);
                });
        },
        //页码切换
        handleCurrentChange(val) {
            this.formData.pageNo = val;
            this._queryProductInfo();
        },
        //每页展示条数的切换
        handleSizeChange(val) {
            this.formData.pageSize = val;
            this._queryProductInfo();
        },
        //点击查询
        handleSearch() {
            this.formData.pageNo = 1;
            this.formData.pageSize = 10;
            this._queryProductInfo();
        },
        //点击清空
        handleClear() {
            this.formData = {
                productNo: "",
                productName: "",
                bigCategoryId: "",
                midCategoryId: "",
                smaCategoryId: "",
                type: "",
                pageNo: 1,
                pageSize: 10
            };
            this.midCategoryOptions = [];
            this.smaCategoryOptions = [];
            this.$message({
                type: "success",
                message: "清空成功!"
            });
            this._queryProductInfo();
        },
        //查询大分类下拉框表格数据
        _queryBigCategoryInfo(){
          var data = {};
          queryBigCategoryInfo(data).then(res => {
            this.bigCategoryOptions = res;
          }).catch(err => {
            this.$message.error(err.message);
          })
        },
        //查询中分类下拉框表格数据
        _queryMidCategoryInfo(opt){
          var parentId = opt ? opt :this.formData.bigCategoryId;
          var data = {
            parentId: parentId
          };
          queryOtherCategoryInfo(data).then(res => {
            this.midCategoryOptions = res;
            this.formData.midCategoryId = '';
            this.formData.smaCategoryId = '';
          }).catch(err => {
            this.$message.error(err.message);
          })
        },
        //查询小分类下拉框表格数据
        _querySmaCategoryInfo(opt){
          var parentId = opt ? opt :this.formData.bigCategoryId;
          var data = {
            parentId: parentId
          };
          queryOtherCategoryInfo(data).then(res => {
            this.smaCategoryOptions = res;
            this.formData.smaCategoryId = '';
          }).catch(err => {
            this.$message.error(err.message);
          })
        }
    },
    components: {
        "m-pagination": mPagination
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pagination-con {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>